<template>
  <div class="edit-form">
    <!-- <div class="edit-now-info">
      <FormBasicEquipment ref="formData" :data-model="data.formData" />
      <FormBasicEquipment ref="broadData" :data-model="data.broadData" />
    </div>
    <div class="edit-form-history-info">
      <FormBasicEquipment ref="histroyInfo" :data-model="data.histroyInfo" />
    </div>
    <div class="edit-form-button">
     <el-button type="primary" @click="getFormData()" >立即创建</el-button>
     <el-button @click="getFormData()">重置</el-button> 
    </div> -->
    <el-col v-show="showInfo">
      <FormBasicEquipment :data-form="data.repairedForm" />
    </el-col>
    <el-col v-show="!showInfo">
      <FormDetailNoImg :data-model="data.repairedForm[0].formShowInfo" />
    </el-col>
    <el-col
      v-for="item in buttonGroups"
      :key="item.name"
      :span="item.span || 2"
      :offset="item.index == 0 ? 6 : 0"
    >
      <el-button
        v-if="showInpage == item.showInpage"
        :type="item.style || ''"
        @click="clickFn(item.buttonType)"
       
        >{{ item.name }}</el-button
      >
    </el-col>
  </div>
</template>

<script>
import data from "./const";
import FormBasicEquipment from "@/components/formEdit";
import FormDetailNoImg from "@/components/formEdit/formDetailNoImg";
export default {
  components: { FormBasicEquipment, FormDetailNoImg },

  data() {
    return {
      showInfo: false,
      showInpage: 1,
      data,
      buttonGroups: [],
    };
  },
  methods: {
    getFormData() {
      console.log("父组件表单提交");
    },
    getButtonGroupsByUrl(router) {
      let getButtonGroups = JSON.parse(localStorage.getItem("buttonGroups"));
      return getButtonGroups[router];
    },
    update(){
       console.log("update");
    this.showInfo = false;
      this.showInpage=1;
    },
    cancel(){
       console.log("cancel");
       this.showInfo = false;
      this.showInpage=1;
    },
    edit(){
      console.log("edit")
      this.showInfo = true;
      this.showInpage=2;
    },
    clickFn(type) {
    if(type=="add"){this.add()};
    if(type=="cancel"){this.cancel()};
    if(type=="update"){this.update()};
    if(type=="edit"){this.edit()};
    },
  },
  created() {
    this.buttonGroups = this.getButtonGroupsByUrl(this.$route.path);
    console.log(this.getButtonGroupsByUrl(this.$route.path));
  },
};
</script>
<style lang="scss">
.edit-form {
  margin: 10px;
  .edit-now-info {
    background: white;
  }
  .edit-form-history-info {
    background: white;
    margin: 20px 0;
  }
}
</style>
